<template>
  <div>
    <a-card :bordered="false" :bodyStyle="tstyle">
      <div class="table-page-search-wrapper" v-if="hasPerm('appUser:page')">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="登录名">
                <a-input v-model="queryParam.loginName" allow-clear placeholder="登录名"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="昵称">
                <a-input v-model="queryParam.nick" allow-clear placeholder="用户昵称"/>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="4" :sm="24">
                <a-form-item label="账号状态">
                  <a-select v-model="queryParam.status" alow-clear placeholder="账号状态" >
                    <a-select-option v-for="(item,index) in userAccountStatusDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="账号类型">
                  <a-select v-model="queryParam.isReal" alow-clear placeholder="账号类型" >
                    <a-select-option v-for="(item,index) in isRealStatusDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="在线状态">
                  <a-select v-model="queryParam.onlineStatus" alow-clear placeholder="在线状态" >
                    <a-select-option v-for="(item,index) in userOnlineStatusDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="门票状态">
                  <a-select v-model="queryParam.ticket" alow-clear placeholder="门票状态" >
                    <a-select-option v-for="(item,index) in ticketStatusDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="会员状态">
                  <a-select v-model="queryParam.vip" alow-clear placeholder="会员状态" >
                    <a-select-option v-for="(item,index) in vipStatusDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="4" :sm="24">
                <a-form-item label="性别">
                  <a-select v-model="queryParam.sex" alow-clear placeholder="性别" >
                    <a-select-option v-for="(item,index) in userSexDict" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="10" :sm="24">
                <a-form-item label="注册时间">
                  <a-range-picker
                    v-model="queryParam.dates"
                    :show-time="{
                      hideDisabledOptions: true,
                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                    }"
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="4" :sm="24" >
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)" >查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="true">
<!--      :rowSelection="options.rowSelection"-->
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowKey="(record) => record.id"
        :rowSelection="options.rowSelection"
        size="small"
        bordered
        :scroll="{ x: 1300 }"
      >
        <template class="table-operator" slot="operator" >
          <x-down
            v-if="hasPerm('appUser:export')"
            ref="batchExport"
            @batchExport="batchExport"
          />
          <span style="font-size: 28px; color: #ff413e;margin-left: 10px" v-for="(item, index) in noPayList" :key="index">{{item.name+"("+item.count+")"}}</span>
<!--          <a-button @click="doAppUserOld">旧后台用户</a-button>-->
        </template>
        <span slot="headPicUrl" slot-scope="text">
          <img :src="text" style="width: 30px;height: 30px" @click="imgSrc=text; previewVisible=true">
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
            <img alt="example" style="width: 100%" :src="imgSrc"/>
          </a-modal>
        </span>
        <span slot="nick" slot-scope="text">
          <div class="zy-text-line">{{ text }}</div>
        </span>
        <span slot="vipTime" slot-scope="text">
          <div class="zy-text-line">{{ text }}</div>
        </span>
        <span slot="vipTime" slot-scope="text">
          <div class="zy-text-line">{{ text }}</div>
        </span>
        <span slot="createTime" slot-scope="text">
          <div class="zy-text-line">{{ text }}</div>
        </span>
        <span slot="sex" slot-scope="text">
          {{ 'user_sex' | dictType(text) }}
        </span>
        <span slot="onlineStatus" slot-scope="text">
          <div v-if="text==0" style="width: 12px; height: 12px; border-radius: 50%; background-color: #0ED1D9; margin-left: 25px"></div>
        </span>
        <span slot="txCode" slot-scope="text">
          <div @click="copy(text)">{{ text }}</div>
        </span>
        <span slot="deviceModel" slot-scope="text">
          <div v-if="text.includes('iPhone')" class="zy-text-line" style="color: #fb5059;">苹果</div>
          <div v-else class="zy-text-line" style="color: #006EFF">安卓</div>
        </span>
        <span slot="status" slot-scope="text">
          {{ 'user_account_status' | dictType(text) }}
        </span>
        <span slot="ticket" slot-scope="text">
          {{text=='0'?'已购买': ''}}
        </span>
        <span slot="vip" slot-scope="text">
          {{text=='0'?'会员': ''}}
        </span>
        <span slot="isReal" slot-scope="text">
          {{ 'is_real_status' | dictType(text) }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-if="hasPerm('appUser:edit')" @click="$refs.editForm.edit(record)">详情</a>
          <a-divider type="vertical" v-if="hasPerm('appUser:edit') || hasPerm('appUser:editOffline')"/>
          <a v-if="hasPerm('appUser:editOffline')" @click="$refs.editOfflineForm.edit(record)">强制下线</a>
          <a-divider type="vertical" v-if="hasPerm('appUser:edit') || hasPerm('appUser:editOffline') || hasPerm('appUser:editWallet')"/>
          <a v-if="hasPerm('appUser:editWallet')" @click="$refs.editWalletForm.edit(record)">钱包</a>
          <a-divider type="vertical" v-if="hasPerm('appUser:edit') || hasPerm('appUser:editOffline') || hasPerm('appUser:editWallet') || hasPerm('appDynamic:page')"/>
<!--          <a v-if="hasPerm('appDynamic:page')" @click="$refs.dynamicIndex.index(record)">朋友圈</a>-->
<!--          <a-divider type="vertical" v-if="hasPerm('appUser:edit') || hasPerm('appUser:editOffline') || hasPerm('appUser:editWallet') || hasPerm('appDynamic:page') || hasPerm('appChatHistory:getByOwnTxCodePage')"/>-->
<!--          <a v-if="hasPerm('appChatHistory:getByOwnTxCodePage')" @click="$refs.chatIndex.index(record)">聊天记录</a>-->
        </span>
      </s-table>
      <edit-form ref="editForm" @ok="handleOk" />
      <editOffline-form ref="editOfflineForm" @ok="handleOk" />
      <chat ref="chatIndex" @ok="handleOk" />
      <dynamic ref="dynamicIndex" @ok="handleOk" />
      <editWallet-form ref="editWalletForm" @Ok="handleOk" />
    </a-card>
  </div>
</template>
<script>
  import { STable, XDown } from '@/components'
  import moment from 'moment'
  import { appUserPage, appUserExport, importOldUser, noPayList } from '@/api/modular/app/user/appUserManage'
  import editForm from './editForm.vue'
  import editOfflineForm from './editOfflineForm.vue'
  import chat from './chat/index.vue'
  import dynamic from './dynamic/index.vue'
  import editWalletForm from './editWalletForm.vue'
  import { copy } from 'clipboard'
  export default {
    components: {
      STable,
      editForm,
      editOfflineForm,
      chat,
      dynamic,
      editWalletForm,
      XDown
    },
    data () {
      return {
        noPayList: [],
        // 高级搜索 展开/关闭
        advanced: true,
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '腾讯Code',
            align: 'center',
            dataIndex: 'txCode',
            width: 120,
            scopedSlots: { customRender: 'txCode' }
          },
          {
            title: '登录名',
            align: 'center',
            dataIndex: 'loginName',
            width: 100
          },
          {
            title: '头像',
            align: 'center',
            dataIndex: 'headPicUrl',
            scopedSlots: { customRender: 'headPicUrl' }
          },
          {
            title: '昵称',
            align: 'center',
            dataIndex: 'nick',
            width: 100,
            scopedSlots: { customRender: 'nick' }
          },
          {
            title: '性别',
            align: 'center',
            dataIndex: 'sex',
            width: 50,
            scopedSlots: { customRender: 'sex' }
          },
          {
            title: '设备型号',
            align: 'center',
            dataIndex: 'deviceModel',
            width: 100,
            scopedSlots: { customRender: 'deviceModel' }
          },
          {
            title: '在线状态',
            align: 'center',
            dataIndex: 'onlineStatus',
            scopedSlots: { customRender: 'onlineStatus' }
          },
          {
            title: '门票',
            align: 'center',
            dataIndex: 'ticket',
            scopedSlots: { customRender: 'ticket' }
          },
          {
            title: '会员',
            align: 'center',
            dataIndex: 'vip',
            scopedSlots: { customRender: 'vip' }
          },
          {
            title: '会员时间',
            align: 'center',
            dataIndex: 'vipTime',
            width: 150,
            scopedSlots: { customRender: 'vipTime' }
          },
          {
            title: '城市',
            align: 'center',
            dataIndex: 'address'
          },
          {
            title: '钻石',
            align: 'center',
            dataIndex: 'diamondNum'
          },
          {
            title: '注册时间',
            align: 'center',
            dataIndex: 'createTime',
            width: 150,
            scopedSlots: { customRender: 'createTime' }
          },
          // {
          //   title: '账号类型',
          //   align: 'center',
          //   dataIndex: 'isReal',
          //   scopedSlots: { customRender: 'isReal' }
          // },
          // {
          //   title: '在线时间',
          //   align: 'center',
          //   dataIndex: 'onlineTime'
          // },
          {
            title: '账号状态',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
          }
          // {
          //   title: '强制下线到期时间',
          //   align: 'center',
          //   dataIndex: 'offlineTime'
          // }
        ],
        tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          noPayList().then((res) => {
            this.noPayList = res.data
          })
          return appUserPage(Object.assign(parameter, this.switchingDate())).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        // 用户性别
        userSexDict: [],
        // 用户账号状态
        userAccountStatusDict: [],
        // 用户会员状态
        vipStatusDict: [],
        // 门票状态
        ticketStatusDict: [],
        // 用户在线状态
        userOnlineStatusDict: [],
        // 是否数据号
        isRealStatusDict: [],
        // 预览
        previewVisible: false,
        // 图片地址赋值
        imgSrc: '',
        options: {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      }
    },
    created () {
      if (this.hasPerm('appUser:edit') || this.hasPerm('appUser:editOffline') || this.hasPerm('appUser:editWallet') || this.hasPerm('appDynamic:page') || this.hasPerm('appChatHistory:getByOwnTxCodePage')) {
        this.columns.push({
          title: '操作',
          width: '200px',
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        })
      }
      // 初始化字典下来
      this.sysDictTypeDropDown()
    },
    methods: {
      copy,
      moment,
      /**
       * 查询参数组装
       */
      switchingDate () {
        const dates = this.queryParam.dates
        if (dates != null) {
          this.queryParam.searchBeginTime = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss')
          this.queryParam.searchEndTime = moment(dates[1]).format('YYYY-MM-DD HH:mm:ss')
          if (dates.length < 1) {
            delete this.queryParam.searchBeginTime
            delete this.queryParam.searchEndTime
          }
        }
        const obj = JSON.parse(JSON.stringify(this.queryParam))
        delete obj.dates
        return obj
      },
      /**
       * 获取字典数据
       */
      sysDictTypeDropDown () {
        this.userSexDict = this.$options.filters['dictData']('user_sex')
        this.userAccountStatusDict = this.$options.filters['dictData']('user_account_status')
        this.vipStatusDict = this.$options.filters['dictData']('vip_status')
        this.ticketStatusDict = this.$options.filters['dictData']('ticket_status')
        this.userOnlineStatusDict = this.$options.filters['dictData']('user_online_status')
        this.isRealStatusDict = this.$options.filters['dictData']('is_real_status')
      },
      /**
       * 高级搜索
       */
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      /**
       * 批量导出
       */
      batchExport () {
        const paramIds = this.selectedRowKeys.map((d) => {
            return { 'id': d }
        })
        appUserExport(paramIds).then((res) => {
            this.$refs.batchExport.downloadfile(res)
        })
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      handleCancel() {
        this.previewVisible = false
      },
      doAppUserOld() {
        importOldUser().then((res) => {
          this.$refs.table.refresh()
        })
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 2px;
  }
  button {
    margin-right: 2px;
  }
  .zy-text-line {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
</style>
